// angular animation styles
// http://www.technofattie.com/2014/07/27/easy-loading-indicator-when-switching-views-in-angular.html
// ---------------------------------------------- //
.view-fade {
  &.ng-enter {
    .transition(1.2s ease);
    position: relative;
    opacity: 0;
    top: 0;
    left: 0;
    &.ng-enter-active {
      opacity: 1;
    }
  }
  &.ng-leave {
    opacity: 1;
    &.ng-leave-active {
      opacity: 0;
    }
  }
}

// ---------------------------------------------- //
.view-slide {
  &.ng-enter {
    .transition(1.2s ease);
    position: relative;
    top: 0;
    left: 100%;
    &.ng-enter-active {
      left: 0;
    }
  }
  &.ng-leave {
    left: 0;
    &.ng-leave-active {
      left: -100%;
    }
  }
}

// Pulse ---------------------------------------------- //
.pulse {
  animation-name: pulse_animation;
  animation-duration: 5000ms;
  transform-origin: 70% 70%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes pulse_animation {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
